<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<!-- base lib -->
<script type="text/javascript" src="<%=request.getContextPath() %>/script/jquery.js"></script>

<!-- third party lib -->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/plugin/flexigrid/css/flexigrid/flexigrid.css">
<script type="text/javascript" src="<%=request.getContextPath() %>/plugin/flexigrid/flexigrid.js"></script>

<!-- my lib -->
<style>

    body
        {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        }
        
    .flexigrid div.fbutton .add
        {
            background: url(<%=request.getContextPath() %>/plugin/flexigrid/css/images/add.png) no-repeat center left;
        }   

    .flexigrid div.fbutton .delete
        {
            background: url(<%=request.getContextPath() %>/plugin/flexigrid/css/images/close.png) no-repeat center left;
        }   

        
</style>

</head>
<body>

<form id="sform">
    <p>
    The values you entered will be place in name column for demo's sake.<br />
    Value 1 : <input type="text" name="val1" value="" autocomplete="off" /><br />
    Value 2 : Is a hidden input with value 3<input type="hidden" name="val2" value="3" /><br />
    Value 3 : 
    <select name="val3">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
    </select><br />
    Value 4 : <input type="checkbox" name="val4" id="val4" value="4" /><label for="val4">This will pass a value 4 if checked</label>
    </p>
    <p>
    <input type="reset" value="Reset" />
    <input type="submit" value="Submit" />
    </p>
    
</form>

<table id="flexgridTest" style="display:none">
</table>


<table class="flexme">
    <thead>
            <tr>
                <th width="100">Col 1</th>
                <th width="100">Col 2</th>
                <th width="100">Col 3 is a long header name</th>
                <th width="300">Col 4</th>

            </tr>
    </thead>
    <tbody>
            <tr>
                <td>This is data 1 with overflowing content</td>
                <td>This is data 2</td>
                <td>This is data 3</td>

                <td>This is data 4</td>
            </tr>
            <tr>

                <td>This is data 1</td>
                <td>This is data 2</td>
                <td>This is data 3</td>
                <td>This is data 4</td>
            </tr>
            
    </tbody>
</table>

<script type="text/javascript">
$("#flexgridTest").flexigrid(
   {
            url: './FlexGrid.xml',
            dataType: 'xml',
            colModel : [
                {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
                {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
                {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
                {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
                {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
                ],
            searchitems : [
                {display: 'ISO', name : 'iso'},
                {display: 'Name', name : 'name', isdefault: true}
                ],
            buttons : [ 
                {name :'添加',bclass:'add',onpress:action},
                {name :'修改',bclass:'edit',onpress:action},
                {name :'删除',bclass:'delete',onpress:action},
                {separator : true}
                ],
            sortname: "iso",
            sortorder: "asc",
            usepager: true,
            title: '这个是我的测试表格',
            useRp: true,
            rp: 15,
            showTableToggleBtn: false,
            width: 700,
            onSubmit: addFormData,
            height: 200
   }
);




//This function adds paramaters to the post of flexigrid. You can add a verification as well by return to false if you don't want flexigrid to submit           
function addFormData()
    {
    
    //passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
    var dt = $('#sform').serializeArray();
    $("#flexgridTest").flexOptions({params: dt});
    return true;
    }
    
$('#sform').submit
(
    function ()
        {
            $('#flexgridTest').flexOptions({newp: 1}).flexReload();
            return false;
        }
);                      

function action() {
    alert("adfadfafa") ;
}
$('.flexme').flexigrid();
</script>

</body>
</html>